<!--
 * @Descripttion: 编辑文章
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 17:28:16
-->
<template>
  <div>
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="articleForm"
        :rules="articleFormRules"
        ref="articleForm"
        label-width="140px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="articleForm.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="classify_id">
          <el-select v-model="articleForm.classify_id" placeholder="请选择">
            <el-option
              v-for="item in classifyOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面图" prop="cover">
          <lb-cover
            fileType="image"
            :fileList="articleForm.cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 200 * 200</lb-tool-tips>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="articleForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <lb-ueditor
            v-model="articleForm.content"
            :destroy="true"
          ></lb-ueditor>
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo('articleForm')">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navTitle: '',
      classifyOptions: [],
      articleForm: {
        id: '',
        title: '',
        top: 0,
        cover: [],
        classify_id: '',
        content: ''
      },
      articleFormRules: {
        title: { required: true, type: 'string', message: '请输入标题', trigger: 'blur' },
        top: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' },
        cover: { required: true, type: 'array', message: '请上传图片', trigger: 'change' },
        classify_id: { required: true, type: 'number', message: '请选择类型', trigger: 'change' },
        content: { required: true, type: 'string', message: '请输入内容', trigger: 'blur' }
      }
    }
  },
  created () {
    this.getTypeOptions()
    let { id } = this.$route.query
    this.navTitle = this.$t(id ? 'menu.EditArticle' : 'menu.AddArticle')
    if (id) {
      this.getFormInfo(id)
    }
  },
  methods: {
    getFormInfo (id) {
      this.$api.getArticleDetail({ id }).then(res => {
        if (res.code === 200) {
          for (let key in this.articleForm) {
            this.articleForm[key] = res.data[key]
          }
          this.articleForm.cover = [{ url: res.data.cover }]
        }
      })
    },
    submitFormInfo (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let { articleForm } = this
          let urlType = articleForm.id ? 'editArticleInfo' : 'addArticleInfo'
          let subForm = JSON.parse(JSON.stringify(articleForm))
          subForm.cover = articleForm.cover[0] ? articleForm.cover[0].url : ''
          this.$api[urlType](subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.goBack()
            }
          })
        }
      })
    },
    getTypeOptions () {
      this.$api.getArticleClassifyOptions().then(res => {
        if (res.code === 200) {
          this.classifyOptions = res.data
        }
      })
    },
    getCover (img) {
      console.log(img)
      this.articleForm.cover = img
      // this.articleForm.cover = [img[img.length - 1]]
    },
    goBack () {
      this.$router.back(-1)
    }
  },
  watch: {
    'articleForm.content' (newValue, oldValue) {
      if (newValue && !oldValue) {
        this.$refs['articleForm'].clearValidate('content')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-main {
  .el-input,
  .el-select,
  .el-input-number {
    width: 300px;
  }
}
</style>
